<script>
export default {
  name: "news_component",
  data() {
    return {
      newsList: [
        {
          id: '1',
          title: "新闻1",
          content: "新闻1的内容",
          author: "张三",
          date: "2020-01-01",
        },
        {
          id: '2',
          title: "新闻2",
          content: "新闻2的内容",
          author: "李四",
          date: "2020-01-02",
        },
        {
          id: '3',
          title: "新闻3",
          content: "新闻3的内容",
          author: "王五",
          date: "2020-01-03",
        }],
    }
  },
  methods: {
    pushShow(item) {
      this.$router.push({
        name: 'detail',
        params: {
          id: item.id,
          title: item.title,
          content: item.content,
          author: item.author,
          date: item.date,
        }
      })
    },
    replaceShow(item) {
      this.$router.replace({
        name: 'detail',
        params: {
          id: item.id,
          title: item.title,
          content: item.content,
          author: item.author,
          date: item.date,
        }
      })
    },
  },
}
</script>

<template>
  <div>
    <ul>
      <li v-for="item in newsList" :key="item.id" style="margin-top: 10px">

        <router-link :to="{
          name:'detail',
          params:{
            id:item.id
            ,title:item.title
            ,content:item.content
            ,author:item.author
            ,date:item.date
          }
        }">
          {{ item.title }}
        </router-link>
        <button type="button" style="margin-right: 5px" class="btn btn-primary" @click="pushShow(item)">push查看</button>
        <button type="button" class="btn btn-primary" @click="replaceShow(item)">replace查看</button>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<style scoped>

</style>